import React, { useEffect } from 'react'
import { Line } from '@ant-design/plots'
import * as echarts from 'echarts'
import { useNavigate } from 'react-router-dom'
export function DatePie() {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ]

  const config = {
    data,
    xField: 'year',
    yField: 'value',
    theme: 'classicDark',
    axis: {
      x: {
        line: true,
        title: '日期(选择以查看blog)',
        titleFontWeight: 800,
      },
      y: {
        line: true,
        title: '访问量',
        titleFontWeight: 800,
      },
    },
    point: {
      shapeField: 'square',
      sizeField: 8,
      colorField: 'red',
    },
    interaction: {
      tooltip: {
        marker: false,
      },
    },
    style: {
      lineWidth: 2,
    },
    onReady: (plot) => {
      plot.on('element:click', (...args) => {
        console.log(...args)
      })
    },
  }
  return (
    <div style={{ height: '90vh' }} className="bg-slate-900">
      <Line {...config} className="p-8" />
    </div>
  )
}

//图表
export function DateLines() {
  const navigate = useNavigate()
  const chooseColor = (value) => {
    const date = new Date()
    //当前日期
    const fmt_date = `${date.getFullYear()}-${
      date.getMonth() + 1
    }-${date.getDate()}`
    return value === fmt_date ? '#fff' : undefined
  }
  //TODO
  const data = {
    TimeData: [
      {
        value: '2024-7-28',
        textStyle: {
          fontSize: 12,
          color: '',
        },
      },
      {
        value: '2024-7-29',
        textStyle: {
          fontSize: 12,
          color: '',
        },
      },
      {
        value: '2024-7-30',
        textStyle: {
          fontSize: 12,
          color: '',
        },
      },
      {
        value: '2024-8-1',
        textStyle: {
          fontSize: 12,
          color: '',
        },
      },
    ],
    VisitedData: [150, 230, 224, 218, 135, 147, 260],
  }

  const option = {
    xAxis: {
      name: '日期',
      type: 'category',
      data: data.TimeData,
      nameTextStyle: {
        color: '#ffffff',
      },
    },
    yAxis: {
      name: '访问量',
      type: 'value',
      nameTextStyle: {
        color: '#ffffff',
      },
    },
    series: [
      {
        data: data.VisitedData,
        type: 'line',
      },
    ],
  }
  let myChart = null
  data.TimeData.forEach((item) => {
    item.textStyle.color = chooseColor(item.value)
  })
  useEffect(() => {
    myChart = echarts.init(document.getElementById('chart'))
    myChart.setOption(option)
  }, [option])

  useEffect(() => {
    myChart.on('click', 'series', ({ name }) => {
      navigate('/blog/' + name)
    })
  })
  return (
    <div
      id="chart"
      style={{ width: '100%', height: '90vh' }}
    ></div>
  )
}
